<template>
  <div class="data">
    <div class="data-left">
      <div class="table-box box">
        <a-table
          :bordered="false"
          :pagination="false"
          :data-source="mixList"
          :locale="{ emptyText: '暂无数据' }"
          :rowKey="(record) => record.id">
          <a-table-column
            title="名称"
            key="index"
            data-index="name"
            width="136px">
          </a-table-column>
          <a-table-column
            title="类型"
            key="index"
            data-index="type"
            width="120px">
            <template #default="{ text }">
              <div>{{ soilTypeDict.getValue(text) }}</div>
            </template>
          </a-table-column>
          <a-table-column
            title="设置"
            key="index"
            data-index="type"
            width="70px">
            <template #default="{ text, record }">
              <div style="display: flex; justify-content: space-around">
<!--                <div-->
<!--                  @click="selmixplant(3, record)"-->
<!--                  class="font-btn"-->
<!--                  :type="text"-->
<!--                >-->
<!--                  含水率-->
<!--                </div>-->
                <div
                  @click="selmixplant(1, record)"
                  class="font-btn"
                  :type="text">
                  配合比
                </div>
<!--                <div-->
<!--                  @click="selmixplant(2, record)"-->
<!--                  class="font-btn"-->
<!--                  :type="text"-->
<!--                >-->
<!--                  短信-->
<!--                </div>-->
              </div>
            </template>
          </a-table-column>
          <!--          <a-table-column-->
          <!--            key="xc1"-->
          <!--            title="标准"-->
          <!--            data-index="original"-->
          <!--            width="75px"-->
          <!--          >-->
          <!--            <template #default="{ text, record }">-->
          <!--              <div @click="selmixplant(1, record)" class="font-btn" :type="text">-->
          <!--                设置-->
          <!--              </div>-->
          <!--            </template>-->
          <!--          </a-table-column>-->
          <!--          <a-table-column-->
          <!--            key="xc1"-->
          <!--            title="短信"-->
          <!--            data-index="original"-->
          <!--            width="75px"-->
          <!--          >-->
          <!--            <template #default="{ text, record }">-->
          <!--              <div @click="selmixplant(2, record)" class="font-btn" :type="text">-->
          <!--                设置-->
          <!--              </div>-->
          <!--            </template>-->
          <!--          </a-table-column>-->
        </a-table>
      </div>
    </div>
    <div class="data-right">
      <div class="set-formal box">
        <div class="set-title">当前所选拌合站：{{ selmixinfo.name }}</div>

        <div class="set-center">
          <div class="formalinput">
            <span class="spanstyle">配方名称</span>
            <a-input
              v-model:value="formal.name"
              placeholder="输入配方名称"
              style="width:168px;margin-top:8px"
            />
            <!-- :columns="columns" -->
            <a-table
              :data-source="dataSource"
              :pagination="false"
              class="inputtable"
              :rowKey="(record) => record.key"
            >
              <a-table-column
                key="inputtitle"
                title=""
                data-index="inputtitle"
                width="10%"
              >
              </a-table-column>
              <a-table-column
                key="gl1"
                title="骨料1仓"
                data-index="gl1"
                width="9%"
              >
                <template #default="{ text,record }">
                  <div>
                    <a-input
                      v-show="record.index == 1"
                      v-model:value="formal.gl1"
                    />
                    <a-input
                      v-show="record.index == 2"
                      v-model:value="formal.gl1Design"
                    />
                    <a-select
                      placeholder="请选择"
                      v-show="record.index == 3"
                      v-model:value="formal.gl1Type"
                      style="width:93px"
                    >
                      <a-select-option
                        v-for="item in glTypeList"
                        :key="item.typeKey"
                      >
                        {{ item.typeValue }}
                      </a-select-option>
                    </a-select>
                  </div>
                </template>
              </a-table-column>
              <a-table-column
                key="gl2"
                title="骨料2仓"
                data-index="gl2"
                width="9%"
              >
                <template #default="{ text,record }">
                  <div>
                    <a-input
                      v-show="record.index == 1"
                      v-model:value="formal.gl2"
                    />
                    <a-input
                      v-show="record.index == 2"
                      v-model:value="formal.gl2Design"
                    />
                    <a-select
                      placeholder="请选择"
                      v-show="record.index == 3"
                      v-model:value="formal.gl2Type"
                      style="width:93px"
                    >
                      <a-select-option
                        v-for="item in glTypeList"
                        :key="item.typeKey"
                      >
                        {{ item.typeValue }}
                      </a-select-option>
                    </a-select>
                  </div>
                </template>
              </a-table-column>
              <a-table-column
                key="gl3"
                title="骨料3仓"
                data-index="gl3"
                width="9%"
              >
                <template #default="{ text,record }">
                  <div>
                    <a-input
                      v-show="record.index == 1"
                      v-model:value="formal.gl3"
                    />
                    <a-input
                      v-show="record.index == 2"
                      v-model:value="formal.gl3Design"
                    />
                    <a-select
                      placeholder="请选择"
                      v-show="record.index == 3"
                      v-model:value="formal.gl3Type"
                      style="width:93px"
                    >
                      <a-select-option
                        v-for="item in glTypeList"
                        :key="item.typeKey"
                      >
                        {{ item.typeValue }}
                      </a-select-option>
                    </a-select>
                  </div>
                </template>
              </a-table-column>
              <a-table-column
                key="gl4"
                title="骨料4仓"
                data-index="gl4"
                width="9%"
              >
                <template #default="{ text,record }">
                  <div>
                    <a-input
                      v-show="record.index == 1"
                      v-model:value="formal.gl4"
                    />
                    <a-input
                      v-show="record.index == 2"
                      v-model:value="formal.gl4Design"
                    />
                    <a-select
                      placeholder="请选择"
                      v-show="record.index == 3"
                      v-model:value="formal.gl4Type"
                      style="width:93px"
                    >
                      <a-select-option
                        v-for="item in glTypeList"
                        :key="item.typeKey"
                      >
                        {{ item.typeValue }}
                      </a-select-option>
                    </a-select>
                  </div>
                </template>
              </a-table-column>
              <a-table-column
                key="gl5"
                title="骨料5仓"
                data-index="gl5"
                width="9%"
              >
                <template #default="{ text,record }">
                  <div>
                    <a-input
                      v-show="record.index == 1"
                      v-model:value="formal.gl5"
                    />
                    <a-input
                      v-show="record.index == 2"
                      v-model:value="formal.gl5Design"
                    />
                    <a-select
                      placeholder="请选择"
                      v-show="record.index == 3"
                      v-model:value="formal.gl5Type"
                      style="width:93px"
                    >
                      <a-select-option
                        v-for="item in glTypeList"
                        :key="item.typeKey"
                      >
                        {{ item.typeValue }}
                      </a-select-option>
                    </a-select>
                  </div>
                </template>
              </a-table-column>
              <a-table-column
                key="gl6"
                title="骨料6仓"
                data-index="gl6"
                width="9%"
              >
                <template #default="{ text,record }">
                  <div>
                    <a-input
                      v-show="record.index == 1"
                      v-model:value="formal.gl6"
                    />
                    <a-input
                      v-show="record.index == 2"
                      v-model:value="formal.gl6Design"
                    />
                    <a-select
                      placeholder="请选择"
                      v-show="record.index == 3"
                      v-model:value="formal.gl6Type"
                      style="width:93px"
                    >
                      <a-select-option
                        v-for="item in glTypeList"
                        :key="item.typeKey"
                      >
                        {{ item.typeValue }}
                      </a-select-option>
                    </a-select>
                  </div>
                </template>
              </a-table-column>
              <a-table-column
                key="sn"
                title="水泥仓"
                data-index="sn"
                width="9%"
              >
                <template #default="{ text,record }">
                  <div>
                    <a-input
                      v-show="record.index == 1"
                      v-model:value="formal.cement"
                    />
                    <a-input
                      v-show="record.index == 2"
                      v-model:value="formal.cementDesign"
                    />
                  </div>
                </template>
              </a-table-column>

              <a-table-column
                key="wjj"
                title="外加剂仓"
                data-index="wjj"
                width="9%"
              >
                <template #default="{ text,record }">
                  <div>
                    <a-input
                      v-show="record.index == 1"
                      v-model:value="formal.additive"
                    />
                    <a-input
                      v-show="record.index == 2"
                      v-model:value="formal.additiveDesign"
                    />
                  </div>
                </template>
              </a-table-column>
              <a-table-column
                key="fmh"
                title="粉煤灰仓"
                data-index="fmh"
                width="9%"
              >
                <template #default="{ text,record }">
                  <div>
                    <a-input
                      v-show="record.index == 1"
                      v-model:value="formal.flyash"
                    />
                    <a-input
                      v-show="record.index == 2"
                      v-model:value="formal.flyashDesign"
                    />
                  </div>
                </template>
              </a-table-column>
              <a-table-column
                key="water"
                title="水"
                data-index="water"
                width="9%"
              >
                <template #default="{ text,record }">
                  <div>
                    <a-input
                      v-show="record.index == 1"
                      v-model:value="formal.water"
                    />
                    <a-input
                      v-show="record.index == 2"
                      v-model:value="formal.waterDesign"
                    />
                  </div>
                </template>
              </a-table-column>
            </a-table>
            <span class="spanstyle">粗骨料误差范围(%)</span>
            <a-input
              v-model:value="formal.coarseAggregatePlan"
              placeholder="误差范围"
              class="inputstyle"
            />
            <span class="spanstyle">细骨料误差范围(%)</span>
            <a-input
              v-model:value="formal.fineAggregatePlan"
              placeholder="误差范围"
              class="inputstyle"
            />
            <span class="spanstyle">水泥仓误差范围(%)</span>
            <a-input
              v-model:value="formal.cementRange"
              placeholder="误差范围"
              class="inputstyle"
            />
            <span class="spanstyle">水误差范围(%)</span>
            <a-input
              v-model:value="formal.waterRange"
              placeholder="误差范围"
              style="width:80px;margin-top:8px"
            />
            <div>
              <a-button
                style="width: 120px; float: right;"
                type="primary"
                @click="showFormalVerify"
                :disabled="!(FormalList.mpId > 0)"
              >
                保存
              </a-button>
            </div>
          </div>
          <div class="formaltable">
            <div class="set-title" style="margin-bottom:8px">配方列表</div>
            <a-table
              :bordered="false"
              :pagination="false"
              :data-source="FormalList.table"
              :locale="{ emptyText: '暂无数据' }"
              :rowKey="(record) => record.id"
              style="width:100%"
              :scroll="{
                x: 'max-content',
                y: setHeight('.data-right', 400) + 'px',
              }"
            >
              <a-table-column
                title="序号"
                key="index"
                data-index="index"
                width="20%"
              />

              <a-table-column
                title="配方名称"
                key="pfname"
                data-index="name"
                width="40%"
              />

              <a-table-column
                key="manager"
                title="设置"
                data-index="manager"
                width="20%"
              >
                <template #default="{ text, record }">
                  <div class="font-btn" @click="editFormal(record.key)">
                    编辑
                  </div>
                </template>
              </a-table-column>
              <a-table-column
                key="del"
                title="删除"
                data-index="del"
                width="20%"
              >
                <template #default="{ text, record }">
                  <div class="font-btn" @click="delFormalVerify(record)">
                    删除
                  </div>
                </template>
              </a-table-column>
            </a-table>
          </div>
        </div>
      </div>
    </div>
    <SModal
      :title="selmixinfo.name + '-含水率设置'"
      :isShow="showMoisture"
      :height="245"
      @closed="() => (showMoisture = !showMoisture)"
    >
      <div class="set-moisture">
        <div class="row">
          <div>
            <span>骨料1(%)</span>
            <a-input v-model:value="moistureChecked.gl1" />
          </div>
          <div>
            <span>骨料2(%)</span>
            <a-input v-model:value="moistureChecked.gl2" />
          </div>
        </div>
        <div class="row">
          <div>
            <span>骨料3(%)</span>
            <a-input v-model:value="moistureChecked.gl3" />
          </div>
          <div>
            <span>骨料4(%)</span>
            <a-input v-model:value="moistureChecked.gl4" />
          </div>
        </div>
        <div class="row">
          <div>
            <span>骨料5(%)</span>
            <a-input v-model:value="moistureChecked.gl5" />
          </div>
          <div>
            <span>骨料6(%)</span>
            <a-input v-model:value="moistureChecked.gl6" />
          </div>
        </div>
        <div class="btn-box">
          <a-button
            @click="showMoistureVCode = true"
            style="width: 80px;"
            type="primary"
            >保存</a-button
          >
        </div>
      </div>
    </SModal>
    <SModal
      :title="selmixinfo.name + '-短信设置'"
      width="450"
      height="400"
      :isShow="showMessage"
      @closed="() => (showMessage = !showMessage)"
    >
      <div class="set-message">
        <div class="set-center">
          <a-table
            :bordered="false"
            :pagination="false"
            :data-source="msgUserList"
            :locale="{ emptyText: '暂无数据' }"
            :scroll="{
              x: 'max-content',
              y: setHeight('.set-message .set-center', 90) + 'px',
            }"
            :rowKey="(record) => record.id"
          >
            <a-table-column
              key="name"
              title="是否发送"
              data-index="isAssociation"
              width="80px"
            >
              <template #default="{ text, record }">
                <a-checkbox
                  :checked="text == 1 ? true : false"
                  @change="
                    text == 0
                      ? addMsgUser(undefined, record.id)
                      : delMsgUser(undefined, record.id)
                  "
                />
              </template>
            </a-table-column>
            <a-table-column
              key="name"
              title="联系人"
              data-index="name"
              width="120px"
            >
            </a-table-column>
            <a-table-column
              key="tel"
              title="电话号码"
              data-index="tel"
              width="200px"
            >
            </a-table-column>
          </a-table>
        </div>
        <div class="set-footer">
          <a-button @click="openSettingUser" type="primary">
            管理联系人
          </a-button>
        </div>
      </div>
    </SModal>
    <SModal
      title="管理联系人"
      width="450"
      height="400"
      :isShow="showUserManage"
      @closed="
        () => {
          showUserManage = !showUserManage
          getMsgUserList()
        }
      "
    >
      <div class="set-manage">
        <div class="set-header">
          <div>
            <span>名称:</span>
            <a-input
              v-model:value="user.name"
              style="width:120px;margin-left:8px;"
            />
            <span style="margin-left:26px">手机号:</span>
            <a-input
              v-model:value="user.tel"
              style="width:160px;margin-left:8px;"
            />
          </div>
          <div style="height:56px">
            <a-button
              @click="addUser"
              style="float:right;margin:12px 0px 20px;"
              type="primary"
              >添加</a-button
            >
          </div>
        </div>
        <div class="set-center">
          <a-table
            :bordered="false"
            :pagination="false"
            :data-source="userList"
            :locale="{ emptyText: '暂无数据' }"
            :scroll="{
              x: 'max-content',
              y: setHeight('.set-manage .set-center', 90) + 'px',
            }"
            :rowKey="(record) => record.id"
          >
            <a-table-column
              key="tel"
              title="姓名"
              data-index="name"
              width="120px"
            >
            </a-table-column>
            <a-table-column
              key="tel"
              title="电话"
              data-index="tel"
              width="180px"
            >
            </a-table-column>
            <a-table-column key="tel" title="操作" data-index="id" width="80px">
              <template #default="{ text }">
                <div @click="delUser(text)" class="font-btn">删除</div>
              </template>
            </a-table-column>
          </a-table>
        </div>
      </div>
    </SModal>
    <!--  含水率验证码  -->
    <SModal
      title="含水率提交确认"
      width="360"
      height="150"
      :isShow="showMoistureVCode"
      @closed="() => (showMoistureVCode = !showMoistureVCode)"
    >
      <span>验证码:</span>
      <a-input
        v-model:value="moistureChecked.mpUuid"
        style="width:248px; margin-left:16px"
        placeholder="请输入验证码进行确认"
      />
      <a-button
        @click="
          () => {
            updateMoisture()
            showMoistureVCode = !showMoistureVCode
          }
        "
        :disabled="!(moistureChecked.mpId > 0)"
        style="position:absolute; right:24px; bottom: 12px;"
        type="primary"
      >
        确定
      </a-button>
    </SModal>
    <!--  配比验证码  -->
    <SModal
      title="配比提交确认"
      width="360"
      height="150"
      :isShow="showFormalVCode"
      @closed="() => (showFormalVCode = !showFormalVCode)"
    >
      <span>验证码:</span>
      <a-input
        v-model:value="formal.mpUuid"
        style="width:248px; margin-left:16px"
        placeholder="请输入验证码进行确认"
      />
      <a-button
        @click="
          () => {
            addFormal()
            showFormalVCode = !showFormalVCode
          }
        "
        :disabled="!(FormalList.mpId > 0)"
        style="position:absolute; right:24px; bottom: 12px;"
        type="primary"
      >
        确定
      </a-button>
    </SModal>
    <!--  配比删除验证码  -->
    <!-- 配比删除确认 -->
    <SModal
      :title="delname"
      width="360"
      height="150"
      :isShow="delFormalVCode"
      @closed="() => (delFormalVCode = !delFormalVCode)"
    >
      <span>验证码:</span>
      <a-input
        v-model:value="formal.mpUuid"
        style="width:248px; margin-left:16px"
        placeholder="请输入验证码进行确认"
      />
      <a-button
        @click="
          () => {
            delFormal(selformal)
            delFormalVCode = !delFormalVCode
          }
        "
        :disabled="!(FormalList.mpId > 0)"
        style="position:absolute; right:24px; bottom: 12px;"
        type="primary"
      >
        确定
      </a-button>
    </SModal>
    <!--  短信验证码  -->
    <SModal
      title="短信提交确认"
      width="360"
      height="150"
      :isShow="showMsgVCode"
      @closed="() => (showMsgVCode = !showMsgVCode)"
    >
      <span>验证码:</span>
      <a-input
        v-model:value="formal.mpUuid"
        style="width:248px; margin-left:16px"
        placeholder="请输入验证码进行确认"
      />
      <a-button
        @click="
          () => {
            addFormal()
            showMsgVCode = !showMsgVCode
          }
        "
        :disabled="!(FormalList.mpId > 0)"
        style="position:absolute; right:24px; bottom: 12px;"
        type="primary"
      >
        确定
      </a-button>
    </SModal>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, ref, UnwrapRef} from 'vue'
import moment from 'moment'
import SModal from "@/components/SModal/index.vue"
import {setHeight} from "@/utils/tableUtils"
import {mixplant, formalhook, moisture} from '@/hooks/mix/data'
import {User, messageSetting, userhook} from '@/hooks/mix/user/'
import soilTypeDict from "@/dicts/soilTypeDict";

export default defineComponent({
  setup() {
    const dataSource = [
      {
        index: 1,
        key: 1,
        inputtitle: '材料名称',
      },
      {
        index: 2,
        key: 2,
        inputtitle: '设计配合比(kg)',
      },
      {
        index: 3,
        key: 3,
        inputtitle: '类型',
      },
    ]
    const selformal = ref(-1)
    const delname = ref('配比删除确认')

    const showMoisture = ref(false)
    const showMessage = ref(false)
    const showUserManage = ref(false)
    // 配比验证码弹框
    const showFormalVCode = ref(false)
    //配比删除验证码弹窗
    const delFormalVCode = ref(false)
    // 短信验证码弹框
    const showMsgVCode = ref(false)
    // 含水验证码弹框
    const showMoistureVCode = ref(false)
    // const tableInput: any = ref(

    //         )
    const selmixinfo: any = ref({
      id: -1,
      name: '--',
    })
    const { mixList } = mixplant()
    const {
      formal,
      FormalList,
      glTypeList,
      getFormalByMpId,
      addFormal,
      delFormal,
      editFormal,
    } = formalhook()
    const showFormalVerify = () => {
      showFormalVCode.value = true
    }
    const delFormalVerify = (record: any) => {
      delFormalVCode.value = true
      // record.name
      delname.value = '配比删除确认--' + record.name
      selformal.value = record.key
    }
    /**
     * 点击设置按钮
     * @param type 1:标准设置,2:短信设置
     * @param record 记录
     */
    const selmixplant = (type: number, record: any) => {
      selmixinfo.value.id = record.id
      selmixinfo.value.name = record.name

      if (type == 1) {
        getFormalByMpId(record.id)
      } else if (type == 2) {
        openMsgSetting(record.id)
      } else if (type == 3) {
        openSettingMoisture(record.id)
      }
    }

    const {
      settingMixPlantId,
      msgUserList,
      addMsgUser,
      delMsgUser,
      getMsgUserList,
    } = messageSetting()
    const { user, userList, addUser, delUser, getUserList } = userhook()
    const {
      moistureChecked,
      Moisture,
      getMoistureByMpIdAndDate,
      updateMoisture,
    } = moisture()

    const openMsgSetting = (mpId: number) => {
      settingMixPlantId.value = mpId
      showMessage.value = true
      getMsgUserList(mpId)
    }

    const openSettingUser = () => {
      getUserList()
      user.value = new User()
      showUserManage.value = true
    }

    const openSettingMoisture = (id: number) => {
      let moisture = new Moisture()
      moisture.mpId = id
      moisture.createDate = moment()
        .format('YYYY-MM-DD')
        .toString()
      getMoistureByMpIdAndDate(moisture)
      showMoisture.value = true
    }

    return {
      selmixinfo,
      showMessage,
      showMsgVCode,
      delFormalVCode,
      showUserManage,
      addMsgUser,
      delMsgUser,
      selmixplant,
      getMsgUserList,
      dataSource,
      showMoisture,
      moistureChecked,
      showMoistureVCode,
      openSettingMoisture,
      updateMoisture,
      setHeight,
      delname,
      showFormalVCode,
      showFormalVerify,
      delFormalVerify,
      formal,
      selformal,
      glTypeList,
      mixList,
      addFormal,
      delFormal,
      editFormal,
      getFormalByMpId,

      msgUserList,
      openMsgSetting,
      FormalList,
      user,
      userList,
      addUser,
      delUser,
      getUserList,
      openSettingUser,

      soilTypeDict,
    }
  },
  components: {
    SModal,
  },
})
</script>

<style lang="scss" scoped>
.data {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  .data-left {
    display: flex;
    flex-direction: column;
    width: 328px;
    height: 100%;
    .table-box {
      position: relative;
      flex: 1;
      width: 100%;
      //padding: 10px;
      box-sizing: border-box;
      .table-box-title {
        line-height: 20px;
        margin-bottom: 10px;
        color: #333333;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  .data-right {
    display: flex;
    flex-direction: column;
    width: 1264px;
    height: 100%;
    margin-left: 14px;
    .set-formal {
      display: flex;
      padding: 20px 28px;
      flex-direction: column;
      .set-title {
        width: 100%;
        font-size: 16px;
        font-weight: bold;
      }
      .set-center {
        position: relative;
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        .formal-row {
          width: 100%;
          padding: 0 50px;
          box-sizing: border-box;
          > span {
            font-weight: bold;
          }
          .formal-children-row {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
            width: 100%;
            span {
              margin-right: 12px;
              line-height: 32px;
            }
            span:nth-of-type(2) {
              margin-left: 180px;
            }
          }
        }
        .formal-row:nth-of-type(n + 1) {
          margin-top: 8px;
        }
      }
    }
  }
  .set-message {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    .set-center {
      display: flex;
      position: relative;
      width: 100%;
      flex: 1;
      flex-direction: column;
      align-items: center;
    }
    .set-footer {
      width: 100%;
      height: 60px;
      padding: 14px 0px;
      > button {
        float: right;
      }
    }
  }
  .set-manage {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    .set-center {
      flex: 1;
    }
  }
  .set-moisture {
    display: flex;
    flex-direction: column;
    > * {
      margin-top: 8px;
    }
    > *:first-of-type {
      margin-top: 12px;
    }
    .row {
      display: flex;
      width: 100%;
      > div {
        flex: 1;
      }
      ::v-deep input {
        width: 148px;
        margin-left: 6px;
      }
    }
    .btn-box {
      position: relative;
      margin-top: 14px;
      ::v-deep button {
        float: right;
      }
    }
  }
}
.formaltable {
  width: 100%;
}
.formalinput {
  width: 100%;
}
.box {
  background: #fff;
  box-sizing: border-box;
  border: 1px solid #ebedf0;
}
::v-deep .ant-table-thead > tr > th,
::v-deep .ant-table-tbody > tr > td {
  text-align: center;
}
.inputtable {
  width: 100%;
}
.spanstyle {
  margin-right: 8px;
  margin-top: 8px;
}
.inputstyle {
  width: 80px;
  margin-right: 24px;
  margin-top: 8px;
}
.font-btn{
  cursor: pointer;
  color: rgb(0, 141, 255);
}
</style>
